<template>
  <div id="service">
    <div class="txtArea">
      <div class="_box">
        <span class="_txt _label">
          客服联系通道
        </span>
        <span class="_txt _body">
          软件使用等基础问题请咨询在线客服或阅读帮助文档，在投资开始前请务必联系项目方客服确认情况，
          企业投资者请使用企业联系通道。
        </span>
      </div>
    </div>
    <div class="servList">
      <div class="_box">
        <div class="_cardBox _b1">
          <span class="_icon">
            <i class="iconfont icon-zaixianbangzhu"></i>
          </span>
          <span class="_txt">在线客服</span>
          <span class="_line"></span>
        </div>
        <div class="_cardBox _b2">
          <span class="_icon">
            <i class="iconfont icon-xianxing_kefu-"></i>
          </span>
          <span class="_txt">语音客服</span>
          <span class="_line"></span>
        </div>
        <div class="_cardBox _b3">
          <span class="_icon">
            <i class="iconfont icon-qiyeguanliqi"></i>
          </span>
          <span class="_txt">企业客服</span>
          <span class="_line"></span>
        </div>
        <div class="_cardBox _b4">
          <span class="_icon">
            <i class="iconfont icon-leijishufuwux"></i>
          </span>
          <span class="_txt">技术咨询</span>
        </div>
      </div>
    </div>
    <div class="problem">
      <div class="_box">
        <div class="_label">常见问题及帮助</div>
        <div class="_doc">
          <span class="_icon">
            <i class="iconfont icon-ziyuan"></i>
          </span>
          <span class="_txt">
            &nbsp&nbsp 阅读帮助文档
          </span>
          <span class="_down">
            <i class="iconfont icon-download"></i>
          </span>
        </div>
        <div class="_list">
          <ul >
            <li class="_li" v-for="item in items" :key="item.index" >
              <span class="_txt">{{item.txt}}</span>
              <span class="_icon"><i class="el-icon-arrow-right"></i></span>
              <span class="_line" v-show="item.id!=4"></span>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="_bg">
      <div class="_oval"></div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      items:[
        {id:1,txt:'这是一个问题',link_a:'',},
        {id:2,txt:'这是一个问题',link_a:'',},
        {id:3,txt:'这是一个问题',link_a:'',},
        {id:4,txt:'这是一个问题',link_a:'',}
      ]
    }
  }
}
</script>


<style scoped>
/*全局样式 */
  div,span{
    display: block;
  }
  span{
    text-align: center;
    display: block;
  }
  #service{
    position:absolute;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;
    overflow: hidden;
  }
  .txtArea{
    width: 100%;
    height: 13%;
    position:absolute;
    top: 70px;
  }
  .servList{
    width: 100%;
    height: 35%;
    top:25%;
    position:absolute;
  }
  .problem{
    width: 100%;
    height: 40%;
    position:absolute;
    top: 65%;
  }
/*txt */
  .txtArea ._box{
    width: 90%;
    position: relative;
    margin: 0 auto;
  }
  .txtArea ._txt{
    font-size: 16px;
    color:#fff;
    margin: 5px 0;
    text-align: left;
  }
  .txtArea ._label{
    font-size:20px;
    font-weight: 600;
    
  }
/* serviceList*/
  .servList ._box{
    width: 75%;
    height: 100%;
    background: #fff;
    border-radius: 10px; 
    box-shadow: 0 1px 5px #ddd;
    position: relative;
    margin: 0 auto;
  }
  .servList ._cardBox{
    width: 100%;
    height: 25%;
    position: relative;
  }
  .servList ._icon{
    position:absolute;
    width: 15%;
    height: 60%;
    top:20%;
    left:5%;
  }
  .servList .iconfont{
    font-size: 35px;
    text-align: center;
    line-height: 125%;
    color: #228b22;
  }
  .servList ._txt{
    position:absolute;
    height: 60%;
    top:20%;
    left:35%;
    font-size: 20px;
    text-align: center;
    line-height: 225%;
    font-weight: 500;
    color: #666;
  }
  .servList ._line{
    position:absolute;
    width: 40%;
    bottom: 0;
    left:30%;
    border: #ccc 0.5px solid;
  } 

/* problem*/
  .problem ._box{
    width:95%;
    height: 100%;
    position: relative;
    margin:0 auto;
    background: #f5f5f5;
    border-radius: 20px; 
    box-shadow: 0 -1px 5px #ddd;
  }
  .problem ._label{
    position:absolute;
    font-size: 20px;
    font-weight: 600;
    top:15px;
    left:15px;
  }
  /*._doc */
    .problem ._doc{
      width:95%;
      height:50px;
      top:60px;
      border-radius:10px; 
      position: relative;
      margin: 0 auto;
      background: #ddd;
    }
    .problem ._doc ._icon{
      position:absolute;
      width: 50px;
      height: 100%;
  
    }
    .problem ._doc ._icon .iconfont{
      font-size: 30px;
      text-align: center;
      line-height: 50px;
      color: #000;
    }
    .problem ._doc ._txt{
      font-size: 18px;
      height: 50px;
      width: 200px;
      left: 50px;
      line-height: 50px;
      position:absolute;
      text-align: left;
    }
    .problem ._doc ._down{
      position:absolute;
      width: 50px;
      height: 100%;
      right: 0;
    }
    .problem ._doc ._down .iconfont{
      font-size: 20px;
      text-align: center;
      line-height: 50px;
      color: #666;
    
    }
  /*_list */
    .problem ._list{
      width: 95%;
      height: 60%;
      background: #fff;
      position: relative;
      margin: 0 auto;
      top:20%;
      border-radius:10px; 
      overflow: hidden;
    }
    .problem ._list ul{
      width: 100%;
      height: 100%;
      position: relative;
    }
    .problem ._li{
      width: 100%;
      height: 21%;
      background: #fff;
      position: relative;
    }
    .problem ._list ._line{
      position:absolute;
      width:70%;
      bottom: 0;
      left:15%;
      border: #ccc 0.5px solid;
    }
    .problem ._list ._txt{
      font-size: 16px;
      width: 80%;
      height: 100%;
      line-height: 250%;
      position:absolute;
      text-align: left;
      left:5%;
    }
    .problem ._list ._icon{
      font-size: 20px;
      position:absolute;
      width: 30px;
      height: 100%;
      right: 5px;
      top:0;
      line-height: 225%;
    }
/* oval */
  ._bg{
    z-index: -5;
    position: fixed;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;
    overflow: hidden;
  }
  ._oval{
    position:absolute;
    width: 140%;
    left:-20%;
    height: 30%;
    background: #ff6600;
    border-bottom-right-radius:50%; 
    border-bottom-left-radius:50%; 
    box-shadow: 0 1px 5px #666;
  }
</style>
